
// 设置图表的宽高

const margin = { top: 20, right: 30, bottom: 100, left: 40 };
const Twidth = 700 - margin.left - margin.right;
const Theight = 500 - margin.top - margin.bottom;


// 创建SVG容器
const Tsvg = d3.select("#tiao-svg")
  .attr("width", Twidth + margin.left + margin.right)
  .attr("height", Theight + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

// 加载CSV数据
d3.csv("data/收入分布.csv").then(function(data) {

  // 转换数据，确保数值为数字
  data.forEach(d => {
    d.工资性收入 = +d.工资性收入;
    d.公益性岗位收入 = +d.公益性岗位收入;
    d.其他工资性收入 = +d.其他工资性收入;
    d['财产性收入(合计)'] = +d['财产性收入(合计)'];
    d.转移性收入 = +d.转移性收入;
    d['生产经营性收入(合计)'] = +d['生产经营性收入(合计)'];
  });

  // 创建堆积图的每一项数据堆积
  const keys = ["工资性收入", "公益性岗位收入", "其他工资性收入", "财产性收入(合计)", "转移性收入", "生产经营性收入(合计)"];
  
  // 设置x轴
  const x = d3.scaleBand()
    .domain(data.map(d => d.行政村))
    .range([0, Twidth])
    .padding(0);

  // 设置y轴
  const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.工资性收入 + d.公益性岗位收入 + d.其他工资性收入 + d['财产性收入(合计)'] + d.转移性收入 + d['生产经营性收入(合计)'])])
    .nice()
    .range([Theight, 0]);

  // 设置堆积图的颜色
  const color = d3.scaleOrdinal()
    .domain(keys)
    .range([
        
      "#3357FF", 
      "#D94B16",  
      "#1F53C3",  
      "#FF66B2",  
      "#FF5733",  
      "#66B3FF"   
    ]);

  // 创建堆积数据
  const stack = d3.stack().keys(keys);

  // 对数据进行堆积处理
  const stackedData = stack(data);

 
// 绘制柱子 
const bars = Tsvg.selectAll(".layer")
  .data(stackedData)
  .enter().append("g")
  .attr("class", "layer")
  .attr("fill", d => color(d.key))
  .selectAll("rect")
  .data(d => d)
  .enter().append("rect")
  .attr("x", d => x(d.data.行政村))
  .attr("y", d => y(d[0])) // 初始 y 位置为顶部
  .attr("height", 0) // 初始高度设置为 0
  .attr("width", x.bandwidth())
  .attr("class", "bar")
  .transition() // 添加过渡动画
  .duration(1000) // 动画时长 1000 毫秒
  .attr("y", d => y(d[1])) // 动画目标 y 位置
  .attr("height", d => y(d[0]) - y(d[1])); // 设置缓动效果



  

  // 添加x轴
  Tsvg.append("g")
    .selectAll(".x.axis")
    .data([0])
    .enter()
    .append("g")
    .attr("class", "x axis")
    .attr("transform", `translate(0,${Theight})`)
    .call(d3.axisBottom(x))
    .selectAll("text")
    .style("text-anchor", "middle") // 中心对齐
    .attr("transform", "rotate(-60)") // 旋转90度
    .attr("dy", "-0.5em") // 垂直调整文字位置
    .attr("dx", "-2.5em"); // 水平调整文字位置
   
  // 添加y轴
  Tsvg.append("g")
    .selectAll(".y.axis")
    .data([0])
    .enter()
    .append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(y));

    // 在Y轴上方添加文本标注单位 
    Tsvg.append("text")
      .attr("x",65)  // X坐标，使其对齐到Y轴位置
      .attr("y", 10)  // Y坐标，将文本放置在Y轴上方
      .attr("text-anchor", "middle")  // 文本水平居中
      .text("人均纯收入（元）")
      .style("font-size", "14px");
  // 添加图例
  const legend = Tsvg.selectAll(".legend")
    .data(keys)
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", (d, i) => `translate(0,${i * 20})`);

  legend.append("rect")
    .attr("x", Twidth - 18)
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", color);

  legend.append("text")
    .attr("x", Twidth - 20)
    .attr("y", 9)
    .attr("dy", "0em")
    .style("text-anchor", "end")
    .text(d => d);
   
  
});
